<template>
  <div id="shop_class">
    <div class="mui-content">
      <div class="select_city" @click="open_search_view(true)">
        <input type="search" class="top_search" placeholder="请输入商品名称搜索...">
        <i class="mui-icon mui-icon-closeempty" @tap="clear_input()"></i>
      </div>

      <div class="select_area_main">
        <div class="left fl">
          <div class="mui-scroll-wrapper" style="background-color:#f5f5f5">
            <div class="mui-scroll">
              <!--这里放置真实显示的DOM内容-->
              <ul>
                <li @tap="get_goods_class_lv2(k,i.tid)" :key="k" :class="class_active_index==k?'active':''" v-for="(i,k) in class_list">{{i.name}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="right fl">
          <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <!--这里放置真实显示的DOM内容-->
              <ul>
                <li v-for="(i,k) in class_list_lv2" @tap="go_page(i.tid)" :key="k">
                  <div class="img"><img
                    :src="i.pic" alt=""></div>
                  {{i.name}}
                </li>
              </ul>
            </div>
          </div>


        </div>
      </div>

    </div>

  </div>
</template>
<script>
  import goods_class_ajax from "../../ajax/goods_class_ajax";

  export default {
    data() {
      return {
        class_list: [],
        class_active_index: '',
        class_list_lv2:[]
      }
    },
    methods: {
      // 获取商品二级菜单
      get_goods_class_lv2(k,tid) {
        this.class_active_index = k
        console.log(tid);
        goods_class_ajax.get_goods_class_lv2({
          tid:tid,
          bid:this.$store.state.account.community.sqid,
        },res=>{
          this.class_list_lv2 = res;
        })
      },
      go_page(tid){
        if(tid){

          this.$router.push("/shop/goods_list?type=normal&tid="+tid)
        }

      },
      open_search_view(tf){
        this.$store.commit("open_search_view",tf)
      }
    },
    created() {

      this.class_list = this.$store.state.goods_class.class_list;
      if(this.$store.state.goods_class.class_active_index==null){
        this.class_active_index = 0;
      }else {
        this.class_active_index = this.$store.state.goods_class.class_active_index
      }

      console.log("----")
      console.log(this.class_active_index)
      this.get_goods_class_lv2(this.class_active_index,this.class_list[this.class_active_index].tid)
    }
  }
</script>


<style lang="less" scoped>
  @import "../../../static/pxvalue.less";

  body,
  html,
  .mui-content {
    font-family: "微软雅黑";
    background-color: #FFFFFF;
  }

  .mui-content {
    padding-top: 20px;
  }

  .ptsp_top_stats {
    height: 20px;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
  }

  .mui-bar .mui-segmented-control {
    top: 0;
  }

  .mui-segmented-control.mui-scroll-wrapper {
    height: 44px;
  }

  .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
    height: 44px;
  }

  .mui-action-back {
    height: 44px;
    width: 44px;
  }

  .mui-action-back img {
    width: 100%;
  }

  .mui-title {
    height: 44px;
  }

  .nav {
    width: 1000px;
  }

  .fr {
    float: right;
  }

  .fl {
    float: left;
  }

  .mui-bar {
    top: 0.8533rem;
    font-size: 0.7253rem;
  }

  .hr_20 {
    height: 0.4267rem;
    background-color: #f6f6f6;
  }

  .select_city {
    height: 1.92rem;
    border-bottom: 1px solid #f5f5f5;
    line-height: 1.92rem;
    font-size: 0.512rem;
    padding: 0 0.64rem;
    position: relative;
    z-index: 1000;
  }

  .select_city .top_search {
    height: 1.1947rem;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: 0 0 5px #ccc;
    border-radius: 0.5973rem;
    //   background-image: url(../../images/search_03.png);
    background-repeat: no-repeat;
    background-position: 0.4267rem;
    padding-left: 1.1733rem;
    font-size: 0.512rem;
    background-size: 0.512rem 0.512rem;
    background-color: #ffffff;
    text-align: left;
  }

  .select_city i {
    position: absolute;
    top: 0.512rem;
    right: 1.0667rem;
  }

  .select_city .title {
    display: inline-block;
    height: 100%;
    padding-left: 0.32rem;
    padding-right: 0.32rem;
  }

  .select_city .position_icon,
  .select_city .bottom_arr_icon {
    vertical-align: text-bottom;
    display: inline-block;
    background-size: 100% 100%;
    width: 0.512rem;
    height: 0.5973rem;
  }

  .select_city .position_icon {
    margin-left: 0.64rem;
    //   background-image: url(../../images/select_city_03.png);
  }

  .select_city .bottom_arr_icon {
    vertical-align: text-top;
    //   background-image: url(../../images/select_city_05.png);
  }

  .city_list {
    position: absolute;
    top: 2.0267rem;
    background-color: #ffffff;
    z-index: 1000;
    width: 100%;
    min-height: 6.4rem;
    border-top: 1px solid #f5f5f5;
    overflow: hidden;
    padding-left: 0.64rem;
    padding-top: 0.64rem;
  }

  .city_list .city_item {
    float: left;
    width: 4.3947rem;
    height: 1.5787rem;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    text-align: center;
    line-height: 1.5787rem;
    font-size: 0.5973rem;
    color: #353535;
    margin-right: 0.5973rem;
    margin-bottom: 0.5973rem;
  }

  .city_list .active {
    border: 1px solid #1c83fc;
  }

  .select_area_main {
    position: relative;
    width: 100%;
  }

  .select_area_main ul,
  .select_area_main li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .select_area_main .left {
    width: 3.2rem;
    height: 23.8934rem;
    position: relative;
    background-color: #ffffff;
    border-right: 1px solid #ffffff;
  }

  .select_area_main .left li {
    height: 1.92rem;
    text-align: center;
    line-height: 1.92rem;
    font-size: 0.6187rem;
    color: #0b0303;
    background-color: #f5f5f5;
  }

  .select_area_main .left li.active {
    color: #1c83fc;
    background-color: #ffffff;
  }

  .select_area_main .right {
    width: 12.8rem;
    height: 21.3334rem;
    position: relative;
    background-color: #ffffff;
  }

  .select_area_main .right li {
    float: left;
    width: 4.2667rem;
    height: 3.84rem;
    text-align: center;
    font-size: 0.5973rem;
    color: #353535;
  }

  .select_area_main .right li .img {
    width: 100%;
    height: 2.9013rem;
  }

  .select_area_main .right li .img img {
    width: 2.9013rem;
    height: 2.9013rem;
  }

  .mui-backdrop {
    top: 4.9067rem;
  }

</style>


